<template>
    <view>
        <!-- 常见问题 -->
        <van-tabs :active="active" @change="onChangeTab">
            <van-tab title="停车用户常见问题">
                <van-collapse v-model="activeNames" @change="onChange">
                    <van-collapse-item name="1">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">01</view>
                                <view class="slot-item-title">如何预约车位？</view>
                            </view>
                        </view>
                        基于您的实时位置或者输入目的地，小程序会为您自动推荐停车场，点击“预约临停”或“预约包月”即可进行预约。
                    </van-collapse-item>
                    <van-collapse-item name="2">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">02</view>
                                <view class="slot-item-title">如何添加/修改车牌？</view>
                            </view>
                        </view>
                        小程序首页-“我的”-“车牌管理”，进行车牌添加/修改。
                    </van-collapse-item>
                    <van-collapse-item name="3">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">03</view>
                                <view class="slot-item-title">如何取消预约？</view>
                            </view>
                        </view>
                        <text>a.包月订单：月卡支付后如需取消或者中途退租，请联系平台客服。\n b.预约临停订单：不同车场的取消预约规则不同，详见预约页面的说明提示。</text>
                    </van-collapse-item>
                    <van-collapse-item name="4">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">04</view>
                                <view class="slot-item-title">共享停车支持哪种支付方式？</view>
                            </view>
                        </view>
                        目前支持：微信支付、支付宝支付。
                    </van-collapse-item>
                    <van-collapse-item name="5">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">05</view>
                                <view class="slot-item-title">订单如何支付？</view>
                            </view>
                        </view>
                        <text>
                            a.预约包月：在预约包月时即时支付。\n
                            b.预约临停：预约普通车场，在车辆离场时现场支付。预约个人共享车位，车辆离场后小程序自动生成账单、在小程序中进行支付。详见预约页面的说明提示。
                        </text>
                    </van-collapse-item>
                    <van-collapse-item name="6">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">06</view>
                                <view class="slot-item-title">超出共享时段停车怎么收费？</view>
                            </view>
                        </view>
                        共享时段超时收费按正常临停标准的3倍计算。总账单计费公式=基础停车费+超时时段*标准临停价格*2倍。
                    </van-collapse-item>
                    <van-collapse-item name="7">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">07</view>
                                <view class="slot-item-title">如何获取发票？</view>
                            </view>
                        </view>
                        在普通车场发生的停车费用可申请开具发票，请联系客服索取。使用个人共享车位发生的停车费平台暂不支持开具发票。
                    </van-collapse-item>
                </van-collapse>
            </van-tab>
            <van-tab title="车位主关心的问题">
                <van-collapse v-model="activeNamesRight" @change="onChangeRight">
                    <van-collapse-item name="1">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">01</view>
                                <view class="slot-item-title">个人如何发布共享车位？</view>
                            </view>
                        </view>
                        小程序首页-“发布车位”-“去发布上架”，即可发布共享个人车位。点击“已发布和收益”，可查询已发布上架的车位和被预约使用记录。
                    </van-collapse-item>
                    <van-collapse-item name="2">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">02</view>
                                <view class="slot-item-title">如何维护我的小区和车位信息？</view>
                            </view>
                        </view>
                        小程序首页-“发布车位”-“我的小区和车位”，可查看您的小区和车位认证信息。如需添加或修改信息，请点击“新增”按钮，并上传相关证明材料。
                    </van-collapse-item>
                    <van-collapse-item name="3">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">03</view>
                                <view class="slot-item-title">如何查询收益？</view>
                            </view>
                        </view>
                        小程序首页-“我的”-“我的钱包”，即可查询收益。
                    </van-collapse-item>
                    <van-collapse-item name="4">
                        <view slot="title">
                            <view class="slot-item">
                                <image src="../../static/assets/img/qsinfo.png"></image>
                                <view class="slot-item-text">04</view>
                                <view class="slot-item-title">如何进行提现？</view>
                            </view>
                        </view>
                        小程序首页-“我的”-“我的钱包”-“去提现”，即可提现。提现规则：金额达到200元以上，可一次性全额提现。
                    </van-collapse-item>
                </van-collapse>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script>
// import vanCollapse from '@vant/weapp/collapse/index';
// import vanCollapseItem from '@vant/weapp/collapse-item/index';
// pages/nomalQuestion/nomalQuestion.js
export default {
    components: {
        // vanCollapse,
        // vanCollapseItem
    },
    data() {
        return {
            activeNames: ['1', '2'],
            activeNamesRight: ['1'],
            active: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        onChange(event) {
            this.setData({
                activeNames: event.detail
            });
        },

        onChangeRight(event) {
            this.setData({
                activeNamesRight: event.detail
            });
        },

        onChangeTab() {}
    }
};
</script>
<style>
@import './nomalQuestion.css';
</style>
